<template>
    <div class="personcenter">
        <div class="title">
           <h3><span>学习说明</span></h3>
        </div>
        <div class="content">
            <ul class="clearfix">
                <li>
                    <p><img src="../assets/center01.png" alt=""></p>
                    <h4>(1) 用户注册 <span style="font-weight:bold;color:red;">(已完成)</span></h4>
                    <p> 用户通过主页完成注册后，使用身份证号作为账号及所设密码，登录个人中心。</p> 
                   
                </li>
                <li>
                    <p><img src="../assets/center02.png" alt=""></p>
                    <h4>(2) 选课与激活</h4>
                    <p>用户可通过“全部课程”或“课程包”进行选课；选课时请依据管理部门有关规定来实施；选课完成后，可通过微信、支付宝或学时卡等方式支付，进而激活课程。</p>
                </li>
                <li>
                    <p><img src="../assets/center03.png" alt=""></p>
                    <h4>(3) 在线学习</h4>
                    <p>用户可通过“我的课程”点选目标课程进行浏览和学习。学习进度和时长由系统自动保存。</p> 
                    
                </li>
                <li>
                    <p><img src="../assets/center04.png" alt=""></p>
                    <h4>(4) 在线考试</h4>
                    <p>用户在线学习时长达到有关要求后，用户方可参加考试（通过“参加考试”），考试结果会在试卷提交后立刻展示。如未通过，请用户认真复习后，再次参加考试。</p>
                </li>
                <li>
                    <p><img src="../assets/center05.png" alt=""></p>
                    <h4>(5) 学时申报 （待商学会确定）</h4>
                    <p>学时申报流程由系统自动完成。</p>
                </li>
                <li>
                    <p><img src="../assets/center06.png" alt=""></p>
                    <h4>(6) 记录查询</h4>
                    <p>用户可通过“考试记录”查询考试通过情况；可通过“档案记录”查询所获学时及证书情况；可通过“我的订单”查询课程消费情况。</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>
.personcenter{
     width: 948px;
    background-color: #fff;
    padding:0 20px 30px;
          box-sizing: border-box;
    .title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #f4f4f4;
        margin-bottom:20px;
          box-sizing: border-box;
        h3{
            color:#0169cc;
            span{
                padding-bottom:13px;
                border-bottom:2px solid #0169cc;
                box-sizing: border-box;
            }
        }
    }
    .content{
         width: 100%;
         padding-bottom:100px;
         box-sizing: border-box;
         ul{
             width: 100%;
             li{
                 float: left;
                 width: 48%;
                 margin-bottom:15px;
                 cursor: default;
                &:nth-child(2n+1){
                    margin-right:30px;
                }  
                h4{
                    color:#0169cc;
                    line-height: 30px;
                }
                p{
                    line-height: 30px;
                }
             }
         }
    }
     


}

</style>